<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>养老服务登录界面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5e6d3 0%, #faf0e6 100%);
            min-height: 100vh;
            display: flex;
            color: #5d4037;
        }

        .design-container {
            width: 30%;
            min-width: 300px;
            padding: 40px 20px;
            background: rgba(255, 255, 255, 0.9);
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
            overflow-y: auto;
            height: 100vh;
            position: fixed;
            left: 0;
        }

        .login-container {
            width: 70%;
            margin-left: 30%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 40px;
        }

        .login-card {
            background: rgba(255, 255, 255, 0.95);
            padding: 40px 30px;
            border-radius: 20px;
            box-shadow: 0 8px 24px rgba(93, 64, 55, 0.15);
            width: 100%;
            max-width: 420px;
        }

        .logo {
            text-align: center;
            margin-bottom: 30px;
        }

        .logo img {
            width: 100px;
            height: 100px;
            margin-bottom: 15px;
        }

        .logo h1 {
            color: #5d4037;
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .form-group {
            margin-bottom: 25px;
            position: relative;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #5d4037;
            font-size: 15px;
            font-weight: 500;
        }

        .input-wrapper {
            position: relative;
        }

        .input-wrapper i {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #8d6e63;
        }

        input {
            width: 100%;
            padding: 12px 16px 12px 40px;
            border: 2px solid #d7ccc8;
            border-radius: 12px;
            font-size: 16px;
            transition: all 0.3s;
            outline: none;
            color: #5d4037;
        }

        input:focus {
            border-color: #8d6e63;
            box-shadow: 0 0 0 3px rgba(141, 110, 99, 0.2);
        }

        input.error {
            border-color: #ff5722;
        }

        .error-message {
            color: #ff5722;
            font-size: 13px;
            margin-top: 6px;
            display: none;
        }

        .login-btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #8d6e63 0%, #5d4037 100%);
            border: none;
            border-radius: 12px;
            color: white;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }

        .login-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(93, 64, 55, 0.25);
        }

        .login-btn:active {
            transform: translateY(0);
        }

        .design-notes {
            color: #5d4037;
        }

        .design-notes h2 {
            font-size: 24px;
            margin-bottom: 25px;
            padding-bottom: 10px;
            border-bottom: 2px solid #d7ccc8;
        }

        .design-notes h3 {
            font-size: 18px;
            margin: 20px 0 12px;
            color: #6d4c41;
        }

        .design-notes p {
            line-height: 1.6;
            margin-bottom: 15px;
            color: #795548;
        }

        .design-notes ul {
            padding-left: 20px;
            margin-bottom: 20px;
        }

        .design-notes li {
            line-height: 1.8;
            margin-bottom: 8px;
            color: #795548;
        }

        @media (max-width: 768px) {
            body {
                flex-direction: column;
            }
            .design-container {
                width: 100%;
                height: auto;
                position: relative;
                padding: 20px;
            }
            .login-container {
                width: 100%;
                margin-left: 0;
                padding: 20px;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
    <!-- 左侧设计说明 -->
    <div class="design-container">
        <div class="design-notes">
            <h2>设计说明</h2>
            
            <h3>设计理念</h3>
            <p>以温暖、亲和的设计风格为基础，融合现代科技与人文关怀，打造舒适可靠的服务平台。</p>
            
            <h3>视觉设计</h3>
            <ul>
                <li>温暖色调：采用柔和的米褐色系，营造温馨舒适的氛围</li>
                <li>圆润设计：大圆角设计体现柔和亲切感</li>
                <li>清晰布局：简约直观的界面布局，适合长者使用</li>
                <li>温和反馈：柔和的交互动效，提供清晰的操作指引</li>
            </ul>
            
            <h3>交互设计</h3>
            <ul>
                <li>清晰的视觉反馈：操作状态一目了然</li>
                <li>友好的错误提示：温和的提示文案</li>
                <li>简单的操作流程：降低使用门槛</li>
                <li>适老化适配：更大的点击区域和文字</li>
            </ul>
            
            <h3>无障碍设计</h3>
            <ul>
                <li>合适的对比度：确保文字清晰可读</li>
                <li>直观的图标：帮助理解功能含义</li>
                <li>响应式布局：适配不同设备使用场景</li>
            </ul>
        </div>
    </div>

    <!-- 右侧登录区域 -->
    <div class="login-container">
        <div class="login-card">
            <div class="logo">
                <img src="./imgae/logo.png" alt="养老服务logo">
                <h1>康怡之家</h1>
            </div>
            <form id="loginForm">
                <div class="form-group">
                    <label for="phone">手机号码</label>
                    <div class="input-wrapper">
                        <i class="fas fa-mobile-alt"></i>
                        <input type="tel" id="phone" placeholder="请输入手机号码" maxlength="11">
                    </div>
                    <div class="error-message">请输入有效的手机号码</div>
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <div class="input-wrapper">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="password" placeholder="请输入密码">
                    </div>
                    <div class="error-message">密码不能为空</div>
                </div>
                <button type="submit" class="login-btn">登录</button>
            </form>
        </div>
    </div>

    <script>
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const phone = document.getElementById('phone');
            const password = document.getElementById('password');
            const phoneError = phone.parentElement.nextElementSibling;
            const passwordError = password.parentElement.nextElementSibling;
            
            // 验证手机号
            const phoneRegex = /^1[3-9]\d{9}$/;
            if (!phoneRegex.test(phone.value)) {
                phone.classList.add('error');
                phoneError.style.display = 'block';
                return;
            } else {
                phone.classList.remove('error');
                phoneError.style.display = 'none';
            }
            
            // 验证密码
            if (!password.value) {
                password.classList.add('error');
                passwordError.style.display = 'block';
                return;
            } else {
                password.classList.remove('error');
                passwordError.style.display = 'none';
            }
            
            // 这里可以添加登录逻辑
            alert('验证通过！');
        });
    </script>
</body>
</html> 